<!--
 * @Author: xuna
 * @Descripttion: 报名活动
-->
<template>
  <div v-if="isActivity == 0" class="sign-container">
    <el-row type="flex" justify="end" class="notice-row">
      <wf-el-auth-button
        auth-key="WALFARE-BMTPHD-XZBM"
        type="primary"
        class="add-notice"
        @click="handleClick('newlyAdd')"
      >
        新增报名活动
      </wf-el-auth-button>
    </el-row>
    <!-- 表格 -->
    <div class="page-table-container">
      <wf-el-table
        :list="tableData"
        :total="total"
        :loading="loading"
        :current="current"
        @on-page-change="onPageChange"
      >
        <el-table-column type="index" label="序号" width="100"></el-table-column>
        <el-table-column
          v-for="item in propData"
          :key="item.prop"
          :prop="item.prop"
          :label="item.label"
        ></el-table-column>
        <el-table-column fixed="right" width="357px" label="操作">
          <template slot-scope="scope">
            <wf-el-auth-button
              auth-key="WALFARE-BMTPHD-CKBM"
              type="text"
              class="handle-icon"
              @click="jumpCheck(scope.row)"
            >
              <img src="@/assets/img/check.png" alt="" />
              查看详情
            </wf-el-auth-button>

            <wf-el-auth-button
              auth-key="WALFARE-BMTPHD-BJBM"
              type="text"
              class="handle-icon"
              @click="handleClick('edit', scope.row)"
            >
              <img src="@/assets/img/edit_icon.png" alt="" />
              编辑
            </wf-el-auth-button>

            <wf-el-auth-button
              auth-key="WALFARE-BMTPHD-SCBM"
              type="text"
              class="handle-icon"
              @click="deleteSign(scope.row)"
            >
              <img src="@/assets/img/delete_icon.png" alt="" />
              删除
            </wf-el-auth-button>
            <wf-el-auth-button
              auth-key="WALFARE-BMTPHD-FZBM"
              type="text"
              class="handle-icon"
              @click="copySign(scope.row)"
            >
              <img src="@/assets/img/copy_icon.png" alt="" />
              复制活动
            </wf-el-auth-button>
          </template>
        </el-table-column>
      </wf-el-table>
    </div>
    <!-- 新增编辑报名活动组件 -->
    <sign-edit
      :is-open-edit="isOpenEdit"
      :sign-row="signRow"
      :is-edit="isEdit"
      @closeDrawer="closeDrawer"
      @successEdit="successEdit"
    ></sign-edit>
    <!-- 查看报名详情组件 -->
    <sign-check
      :is-open-check="isOpenCheck"
      :check-row="checkRow"
      @closeDrawer="closeCheckDrawer"
      @refreshData="refreshData"
    ></sign-check>
  </div>
</template>

<script>
  import WfElTable from '@/components/Table/index';
  import SignEdit from './SignEdit';
  import SignCheck from './SignCheck';
  import { getSignPage, signDelete, signCopy } from '@/api/votesign';
  export default {
    components: { WfElTable, SignEdit, SignCheck },
    props: {
      isActivity: {
        type: String,
        required: true,
      },
      isReset: {
        type: Boolean,
        required: true,
      },
      searchContent: {
        type: Object,
        default() {
          return {};
        },
      },
      // isJumpId: {
      //   type: [Number, String],
      //   required: true,
      // },
      // jumpType: {
      //   type: Number,
      //   required: true,
      // },
    },
    data() {
      return {
        current: 1,
        total: 0,
        signRow: {},
        tableData: [],
        loading: false,
        isJumpId: '',
        jumpType: -1,
        propData: [
          {
            prop: 'entryTitle',
            label: '活动名称',
          },
          {
            prop: 'signtime',
            label: '报名时间',
          },
          {
            prop: 'shareCount',
            label: '参与人数',
          },

          {
            prop: 'joinNumber',
            label: '已报名人数',
          },
          {
            prop: 'createTime',
            label: '创建时间',
          },
        ],
        isOpenEdit: false,
        isOpenCheck: false,
        isEdit: false,
        checkRow: {},
        curTime: '',
      };
    },
    watch: {
      isReset() {
        this.initList(this.searchContent, 1);
      },
      // isJumpId(newVal, oldVal) {
      //   console.log(newVal, oldVal);
      //   if (this.jumpType == 1) {
      //     this.jumpCheck({ id: newVal });
      //   }
      // },
      curTime() {
        if (this.isJumpId && this.jumpType == 1) {
          this.jumpCheck({ id: this.isJumpId });
        }
      },
    },
    activated() {
      if (this.$route.query.id) {
        this.isJumpId = this.$route.query.id;
      } else {
        this.isJumpId = '';
      }
      if (this.$route.query.curTime) {
        this.curTime = this.$route.query.curTime;
      } else {
        this.curTime = '';
      }
      if (this.$route.query.activityType) {
        this.jumpType = Number(this.$route.query.activityType);
      } else {
        this.jumpType = -1;
      }
      this.initList(this.searchContent, 1);
      // if (this.isJumpId && this.jumpType == 1) {
      //   this.jumpCheck({ id: this.isJumpId });
      // }
    },
    methods: {
      initList(noticeInfo, current = this.current) {
        this.loading = true;
        let objData = {
          current,
          size: 10,
          entryTitle: noticeInfo.title,
          activityStartTime: noticeInfo.startTime
            ? `${noticeInfo.startTime} 00:00:00`
            : noticeInfo.startTime,
          activityEndTime: noticeInfo.endTime
            ? `${noticeInfo.endTime} 23:59:59`
            : noticeInfo.endTime,
        };
        try {
          getSignPage(objData).then(res => {
            this.loading = false;
            if (res.status == 200) {
              console.log(res);
              let tableData = JSON.parse(JSON.stringify(res.data.records));
              this.tableData = tableData.map(val => {
                val.signtime = `${val.entryStartTime}~${val.entryEndTime}`;
                return val;
              });
              this.total = res.data.total;
            }
          });
        } catch (error) {
          this.loading = false;
        }
      },
      deleteSign(row) {
        this.$confirm('确定删除该报名活动吗？', '提示', {
          confirmButtonText: '确定',
          showCancelButton: false,
          showClose: false,
        })
          .then(() => {
            signDelete({ id: row.id }).then(res => {
              if (res.status == 200) {
                if (this.total % 10 == 1) {
                  this.current--;
                }
                this.initList(this.searchContent, this.current);
                this.$message({
                  type: 'success',
                  message: '删除成功!',
                });
              }
            });
          })
          .catch(() => {});
      },
      copySign(row) {
        this.$confirm('确定复制该报名活动吗？', '提示', {
          confirmButtonText: '确定',
          showCancelButton: false,
          showClose: false,
        })
          .then(() => {
            signCopy({ id: row.id }).then(res => {
              if (res.status == 200) {
                console.log(res);
                this.initList(this.searchContent, this.current);
                this.$message({
                  type: 'success',
                  message: '复制成功!',
                });
              }
            });
          })
          .catch(() => {});
      },
      onPageChange(data) {
        this.current = data.current;
        this.initList(this.searchContent, this.current);
      },
      closeDrawer(close) {
        this.isOpenEdit = close;
        this.signRow = {};
        this.isEdit = false;
      },
      successEdit(val) {
        this.isOpenEdit = val;
        this.initList(this.searchContent, 1);
      },
      closeCheckDrawer(close) {
        this.isOpenCheck = close;
        this.checkRow = {};
      },
      refreshData(val) {
        if (val) {
          this.initList(this.searchContent, 1);
        }
      },
      handleClick(flag, row) {
        console.log(flag, row);
        this.isOpenEdit = true;
        if (flag == 'newlyAdd') {
          // 新增
          this.isEdit = false;
          this.signRow = {};
        } else {
          // 编辑
          this.isEdit = true;
          this.signRow = row;
        }
      },
      jumpCheck(row) {
        this.isOpenCheck = true;
        this.checkRow = row;
      },
    },
  };
</script>

<style lang="scss" scoped>
  .page-table-container {
    height: calc(100% - 74px);
  }
  .wf-table-wrapper {
    height: 100% !important;
  }
  .sign-container {
    height: 100%;
    .add-notice {
      width: 116px;
      height: 36px;
      background: rgba(55, 113, 233, 1);
      border-radius: 7px;
    }
    .notice-row {
      width: 100%;
      height: 74px;
      display: flex;
      align-items: center;
    }
    .handle-icon {
      font-size: 14px;
      color: #353739;
      margin-right: 4px;
      img {
        width: 23px;
        height: 23px;
        vertical-align: middle;
      }
    }
  }
</style>
